<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>任务管理系统 - 数据报表</title>
    <!-- 引入Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">
    <!-- 引入Font Awesome -->
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <!-- 引入Chart.js -->
    <script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.0/dist/chart.umd.min.js"></script>
    <!-- 引入自定义样式 -->
    <link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}">
</head>
<body>
    <!-- 导航栏 -->
    <nav class="navbar navbar-expand-lg navbar-dark bg-primary">
        <div class="container-fluid">
            <a class="navbar-brand" href="{{ url_for('dashboard') }}">
                <i class="fa fa-tasks mr-2"></i>任务管理系统
            </a>
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="切换导航">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarNav">
                <ul class="navbar-nav me-auto mb-2 mb-lg-0">
                    <li class="nav-item">
                        <a class="nav-link" href="{{ url_for('dashboard') }}">
                            <i class="fa fa-dashboard mr-1"></i>仪表盘
                        </a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="{{ url_for('task_list') }}">
                            <i class="fa fa-list mr-1"></i>任务列表
                        </a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="{{ url_for('category_list') }}">
                            <i class="fa fa-folder mr-1"></i>分类管理
                        </a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link active" aria-current="page" href="{{ url_for('reports') }}">
                            <i class="fa fa-bar-chart mr-1"></i>数据报表
                        </a>
                    </li>
                </ul>
                <div class="navbar-nav">
                    <li class="nav-item dropdown">
                        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
                            <i class="fa fa-user-circle mr-1"></i>{{ session.username }}
                        </a>
                        <ul class="dropdown-menu dropdown-menu-end" aria-labelledby="navbarDropdown">
                            <li>
                                <a class="dropdown-item" href="{{ url_for('notifications') }}">
                                    <i class="fa fa-bell mr-1"></i>通知
                                </a>
                            </li>
                            <li>
                                <a class="dropdown-item" href="{{ url_for('settings') }}">
                                    <i class="fa fa-cog mr-1"></i>设置
                                </a>
                            </li>
                            <li><hr class="dropdown-divider"></li>
                            <li>
                                <a class="dropdown-item" href="{{ url_for('logout') }}">
                                    <i class="fa fa-sign-out mr-1"></i>退出登录
                                </a>
                            </li>
                        </ul>
                    </li>
                </div>
            </div>
        </div>
    </nav>

    <!-- 主要内容区域 -->
    <div class="container-fluid mt-4">
        <!-- 消息提示区域 -->
        {% with messages = get_flashed_messages(with_categories=true) %}
            {% if messages %}
                {% for category, message in messages %}
                    <div class="alert alert-{{ category }} alert-dismissible fade show" role="alert">
                        {{ message }}
                        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="关闭"></button>
                    </div>
                {% endfor %}
            {% endif %}
        {% endwith %}

        <!-- 页面标题和筛选器 -->
        <div class="d-flex justify-content-between align-items-center mb-4">
            <h2>
                <i class="fa fa-bar-chart mr-2"></i>数据报表
            </h2>
            <div class="d-flex gap-2">
                <div class="btn-group">
                    <form method="GET" action="{{ url_for('reports') }}" class="d-flex gap-2">
                        <select class="form-select" name="period" onchange="this.form.submit()">
                            <option value="week" {% if period == 'week' %}selected{% endif %}>最近一周</option>
                            <option value="month" {% if period == 'month' %}selected{% endif %}>最近一月</option>
                            <option value="quarter" {% if period == 'quarter' %}selected{% endif %}>最近三月</option>
                            <option value="year" {% if period == 'year' %}selected{% endif %}>最近一年</option>
                            <option value="all" {% if period == 'all' %}selected{% endif %}>全部时间</option>
                        </select>
                        <button type="submit" class="btn btn-secondary d-none">应用</button>
                    </form>
                </div>
                <button type="button" class="btn btn-success" id="exportReport">
                    <i class="fa fa-download mr-1"></i>导出报表
                </button>
            </div>
        </div>

        <!-- 统计卡片 -->
        <div class="row gap-4 mb-6">
            <div class="col-md-3">
                <div class="card bg-white shadow-sm">
                    <div class="card-body">
                        <div class="d-flex justify-content-between items-center">
                            <div>
                                <p class="text-muted text-sm">总任务数</p>
                                <h3 class="font-bold text-lg">{{ stats.total_tasks }}</h3>
                                <p class="text-success text-xs mt-1">
                                    <i class="fa fa-arrow-up"></i> 较上期 +{{ stats.total_tasks_change }}%
                                </p>
                            </div>
                            <div class="w-12 h-12 bg-primary/10 rounded-full flex items-center justify-center text-primary">
                                <i class="fa fa-tasks fa-xl"></i>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-md-3">
                <div class="card bg-white shadow-sm">
                    <div class="card-body">
                        <div class="d-flex justify-content-between items-center">
                            <div>
                                <p class="text-muted text-sm">已完成任务</p>
                                <h3 class="font-bold text-lg">{{ stats.completed_tasks }}</h3>
                                <p class="text-success text-xs mt-1">
                                    <i class="fa fa-arrow-up"></i> 较上期 +{{ stats.completed_tasks_change }}%
                                </p>
                            </div>
                            <div class="w-12 h-12 bg-success/10 rounded-full flex items-center justify-center text-success">
                                <i class="fa fa-check-circle fa-xl"></i>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-md-3">
                <div class="card bg-white shadow-sm">
                    <div class="card-body">
                        <div class="d-flex justify-content-between items-center">
                            <div>
                                <p class="text-muted text-sm">完成率</p>
                                <h3 class="font-bold text-lg">{{ stats.completion_rate }}%</h3>
                                <p class="text-danger text-xs mt-1">
                                    <i class="fa fa-arrow-down"></i> 较上期 -{{ stats.completion_rate_change }}%
                                </p>
                            </div>
                            <div class="w-12 h-12 bg-warning/10 rounded-full flex items-center justify-center text-warning">
                                <i class="fa fa-percent fa-xl"></i>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-md-3">
                <div class="card bg-white shadow-sm">
                    <div class="card-body">
                        <div class="d-flex justify-content-between items-center">
                            <div>
                                <p class="text-muted text-sm">逾期任务</p>
                                <h3 class="font-bold text-lg">{{ stats.overdue_tasks }}</h3>
                                <p class="text-success text-xs mt-1">
                                    <i class="fa fa-arrow-down"></i> 较上期 -{{ stats.overdue_tasks_change }}%
                                </p>
                            </div>
                            <div class="w-12 h-12 bg-danger/10 rounded-full flex items-center justify-center text-danger">
                                <i class="fa fa-exclamation-circle fa-xl"></i>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 图表区域 -->
        <div class="row gap-4 mb-6">
            <!-- 任务状态分布图 -->
            <div class="col-lg-6">
                <div class="card bg-white shadow-sm">
                    <div class="card-header bg-white border-bottom border-gray-200">
                        <h4 class="card-title mb-0">任务状态分布</h4>
                    </div>
                    <div class="card-body">
                        <div class="chart-container" style="position: relative; height:300px;">
                            <canvas id="taskStatusChart"></canvas>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 任务优先级分布图 -->
            <div class="col-lg-6">
                <div class="card bg-white shadow-sm">
                    <div class="card-header bg-white border-bottom border-gray-200">
                        <h4 class="card-title mb-0">任务优先级分布</h4>
                    </div>
                    <div class="card-body">
                        <div class="chart-container" style="position: relative; height:300px;">
                            <canvas id="taskPriorityChart"></canvas>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 图表区域 2 -->
        <div class="row gap-4 mb-6">
            <!-- 任务分类分布图 -->
            <div class="col-lg-6">
                <div class="card bg-white shadow-sm">
                    <div class="card-header bg-white border-bottom border-gray-200">
                        <h4 class="card-title mb-0">任务分类分布</h4>
                    </div>
                    <div class="card-body">
                        <div class="chart-container" style="position: relative; height:300px;">
                            <canvas id="taskCategoryChart"></canvas>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 任务完成趋势图 -->
            <div class="col-lg-6">
                <div class="card bg-white shadow-sm">
                    <div class="card-header bg-white border-bottom border-gray-200">
                        <h4 class="card-title mb-0">任务完成趋势</h4>
                    </div>
                    <div class="card-body">
                        <div class="chart-container" style="position: relative; height:300px;">
                            <canvas id="taskCompletionTrendChart"></canvas>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 详细数据表格 -->
        <div class="card bg-white shadow-sm">
            <div class="card-header bg-white border-bottom border-gray-200">
                <h4 class="card-title mb-0">任务统计详情</h4>
            </div>
            <div class="card-body">
                <div class="table-responsive">
                    <table class="table table-hover">
                        <thead class="bg-light">
                            <tr>
                                <th scope="col">类别</th>
                                <th scope="col">总任务数</th>
                                <th scope="col">已完成</th>
                                <th scope="col">进行中</th>
                                <th scope="col">待办</th>
                                <th scope="col">逾期</th>
                                <th scope="col">完成率</th>
                            </tr>
                        </thead>
                        <tbody>
                            {% for category in category_stats %}
                                <tr>
                                    <td>
                                        {% if category.name %}
                                            <div class="d-flex align-items-center gap-2">
                                                <div class="w-3 h-3 rounded-full" style="background-color: {{ category.color }}"></div>
                                                {{ category.name }}
                                            </div>
                                        {% else %}
                                            <span class="text-muted">无分类</span>
                                        {% endif %}
                                    </td>
                                    <td>{{ category.total }}</td>
                                    <td>{{ category.completed }}</td>
                                    <td>{{ category.in_progress }}</td>
                                    <td>{{ category.todo }}</td>
                                    <td>{{ category.overdue }}</td>
                                    <td>
                                        <div class="d-flex align-items-center gap-2">
                                            <div class="w-16 bg-gray-200 rounded-full h-2">
                                                <div class="bg-success rounded-full h-2" style="width: {{ category.completion_rate }}%"></div>
                                            </div>
                                            <span>{{ category.completion_rate }}%</span>
                                        </div>
                                    </td>
                                </tr>
                            {% endfor %}
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>

    <!-- 引入Bootstrap JS -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"></script>
    <!-- 引入自定义JS -->
    <script src="{{ url_for('static', filename='js/main.js') }}"></script>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            // 任务状态分布图表
            const taskStatusCtx = document.getElementById('taskStatusChart').getContext('2d');
            const taskStatusChart = new Chart(taskStatusCtx, {
                type: 'doughnut',
                data: {
                    labels: ['待办', '进行中', '已完成', '已归档'],
                    datasets: [{
                        data: [{{ status_distribution.todo }}, {{ status_distribution.in_progress }}, {{ status_distribution.completed }}, {{ status_distribution.archived }}],
                        backgroundColor: [
                            'rgba(108, 117, 125, 0.7)',
                            'rgba(13, 110, 253, 0.7)',
                            'rgba(25, 135, 84, 0.7)',
                            'rgba(52, 58, 64, 0.7)'
                        ],
                        borderColor: [
                            'rgba(108, 117, 125, 1)',
                            'rgba(13, 110, 253, 1)',
                            'rgba(25, 135, 84, 1)',
                            'rgba(52, 58, 64, 1)'
                        ],
                        borderWidth: 1
                    }]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    plugins: {
                        legend: {
                            position: 'right',
                        },
                        tooltip: {
                            callbacks: {
                                label: function(context) {
                                    const value = context.raw;
                                    const total = context.dataset.data.reduce((a, b) => a + b, 0);
                                    const percentage = Math.round((value / total) * 100);
                                    return `${context.label}: ${value} (${percentage}%)`;
                                }
                            }
                        }
                    }
                }
            });

            // 任务优先级分布图表
            const taskPriorityCtx = document.getElementById('taskPriorityChart').getContext('2d');
            const taskPriorityChart = new Chart(taskPriorityCtx, {
                type: 'doughnut',
                data: {
                    labels: ['高优先级', '中优先级', '低优先级'],
                    datasets: [{
                        data: [{{ priority_distribution.high }}, {{ priority_distribution.medium }}, {{ priority_distribution.low }}],
                        backgroundColor: [
                            'rgba(220, 53, 69, 0.7)',
                            'rgba(255, 193, 7, 0.7)',
                            'rgba(25, 135, 84, 0.7)'
                        ],
                        borderColor: [
                            'rgba(220, 53, 69, 1)',
                            'rgba(255, 193, 7, 1)',
                            'rgba(25, 135, 84, 1)'
                        ],
                        borderWidth: 1
                    }]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    plugins: {
                        legend: {
                            position: 'right',
                        },
                        tooltip: {
                            callbacks: {
                                label: function(context) {
                                    const value = context.raw;
                                    const total = context.dataset.data.reduce((a, b) => a + b, 0);
                                    const percentage = Math.round((value / total) * 100);
                                    return `${context.label}: ${value} (${percentage}%)`;
                                }
                            }
                        }
                    }
                }
            });

            // 任务分类分布图表
            const taskCategoryCtx = document.getElementById('taskCategoryChart').getContext('2d');
            
            // 构建分类数据
            const categoryLabels = [{% for category in category_stats %}{% if category.name %}"{{ category.name }}"{% else %}"无分类"{% endif %}{% if not loop.last %}, {% endif %}{% endfor %}];
            const categoryData = [{% for category in category_stats %}{{ category.total }}{% if not loop.last %}, {% endif %}{% endfor %}];
            const categoryColors = [{% for category in category_stats %}{% if category.color %}"{{ category.color }}80"{% else %}"rgba(108, 117, 125, 0.7)"{% endif %}{% if not loop.last %}, {% endif %}{% endfor %}];
            const categoryBorderColors = [{% for category in category_stats %}{% if category.color %}"{{ category.color }}"{% else %}"rgba(108, 117, 125, 1)"{% endif %}{% if not loop.last %}, {% endif %}{% endfor %}];
            
            const taskCategoryChart = new Chart(taskCategoryCtx, {
                type: 'bar',
                data: {
                    labels: categoryLabels,
                    datasets: [{
                        label: '任务数量',
                        data: categoryData,
                        backgroundColor: categoryColors,
                        borderColor: categoryBorderColors,
                        borderWidth: 1
                    }]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    scales: {
                        y: {
                            beginAtZero: true,
                            ticks: {
                                stepSize: 1
                            }
                        }
                    },
                    plugins: {
                        legend: {
                            display: false
                        }
                    }
                }
            });

            // 任务完成趋势图表
            const taskCompletionTrendCtx = document.getElementById('taskCompletionTrendChart').getContext('2d');
            
            // 构建时间序列数据
            const trendLabels = [{% for trend in completion_trend %}"{{ trend.date }}"{% if not loop.last %}, {% endif %}{% endfor %}];
            const completedData = [{% for trend in completion_trend %}{{ trend.completed }}{% if not loop.last %}, {% endif %}{% endfor %}];
            const createdData = [{% for trend in completion_trend %}{{ trend.created }}{% if not loop.last %}, {% endif %}{% endfor %}];
            
            const taskCompletionTrendChart = new Chart(taskCompletionTrendCtx, {
                type: 'line',
                data: {
                    labels: trendLabels,
                    datasets: [
                        {
                            label: '已完成任务',
                            data: completedData,
                            borderColor: 'rgba(25, 135, 84, 1)',
                            backgroundColor: 'rgba(25, 135, 84, 0.1)',
                            fill: true,
                            tension: 0.1
                        },
                        {
                            label: '新增任务',
                            data: createdData,
                            borderColor: 'rgba(13, 110, 253, 1)',
                            backgroundColor: 'rgba(13, 110, 253, 0.1)',
                            fill: true,
                            tension: 0.1
                        }
                    ]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    scales: {
                        y: {
                            beginAtZero: true,
                            ticks: {
                                stepSize: 1
                            }
                        }
                    }
                }
            });

            // 导出报表功能
            document.getElementById('exportReport').addEventListener('click', function() {
                // 模拟导出功能
                alert('报表导出功能将在实际系统中实现');
                // 实际系统中，这里可以实现导出PDF、Excel或CSV等功能
            });
        });
    </script>
</body>
</html>